<template>
	<view v-if="pageData" class="p-bot100">
		<image :src="pageData.image" mode="widthFix" class="rows"></image>
		<view class="row j-se f-wrap m-top50">
			<view class="flexBox  LimitBox" >
				<view class="Limit">限量</view>
				<view class="stock">{{pageData.stock}}份</view>
			</view>
			<view class="flexBox  LimitBox m-left30" >
				<view class="Limit">剩余</view>
				<view class="stock">{{pageData.surplus}}份</view>
			</view>
			<view class="flexBox  LimitBox m-left30" >
				<view class="Limit">分类</view>
				<view class="stock">{{pageData.goods_category_name}}</view>
			</view>
		</view>
		
		<view class="row f-column a-center m-top50">
			<view class="btn size34 flexac" 
			     :class="pageData.compose == 1?'bged color_33':'bgd2 color_99'"
				 @click="synthesis">合成</view>
			<text class="color_99 size26 m-top16">每位用户只限合成 {{pageData.limit_buy}} 次</text>
		</view>
		
		<view class="viewbox auto bg2c padding20 bor_radius_20 m-top50">
			<view class="row j-centert color_ED size34 t-letter4">合成所需藏品</view>
			<view class="row j-sb a-center m-top50">
				<view class="p-re m-bot40" v-for="(item,index) in pageData.chip_goods" :key="index">
					<view class="list flexac p-re ">
						<view class="xuenw">{{item.get_num}} / {{item.num}}</view>
						<image :src="item.image" mode="aspectFill" class="listImg"></image>
					</view>
					<text class="color_99 h6 ellipsis text-center m-top14">{{item.name}}</text>
				</view>
				
			</view>
		</view>
		
		<view class="viewbox auto bg2c padding20 bor_radius_20 m-top50">
			<view class="row j-centert color_ED size34 t-letter4">合成说明</view>
			<view class="rows j-sb a-center m-top50 color_99" v-html="util.checkImg(pageData.content)"></view>
		</view>
		
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id:'',
				pageData:'',
			}
		},
		onLoad(option) {
			if(option.id) this.id = option.id;
			this.chipDetail();
		},
		methods: {
			chipDetail(){
				this.$http.get('/goods/chipDetail',{
					id:this.id
				}).then(res=>{
					if(res.code != 1) return;
					this.$BarTitle(res.data.name);
					this.pageData = res.data;
				})
			},
			
			synthesis(){
				if(this.pageData.compose != 1) return;
				this.$showLoading('合成中~');
				this.$http.post('/compose/chipCompose',{
					goods_id:this.pageData.id
				}).then(res=>{
					this.$hideLoading();
					if(res.code != 1) return this.$Toast(res.msg);
					this.$Toast('合成成功~');
					this.chipDetail();
				})
			}
		}
	}
</script>
<style>
	page {
		background-color: #1e201f;
	}
</style>
<style lang="scss" scoped>
	.LimitBox {
		height: 54rpx;
		line-height: 54rpx;
		background: #3A3A3A;
		border-radius: 10rpx;
		font-size: 14px;
	
		.Limit {
			padding: 0 15rpx;
			border-radius: 6rpx;
			color: #010101;
			background-color: #EDDFC0;
		}
	
		.stock {
			padding: 0 20rpx;
			color: #fff;
		}
	}
	.btn{
		width:480rpx;
		height: 80rpx;
		border-radius: 40rpx;
	}
	.list{
		width:184rpx;
		height: 184rpx;
		border:2px solid #ffffff;
		border-radius: 10rpx;
	}
	.listImg{
		width:174rpx;
		height: 174rpx;
	}
	.xuenw{
		background-color:#e75436;
		color:#ffffff;
		font-size:24rpx;
		padding: 4rpx 10rpx;
		position: absolute;
		top:-16rpx;
		right: -16rpx;
		z-index:10;
		border-radius: 30rpx;
	}
</style>
